﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <!-- iOS bare minimum configuration -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />

        <title>Marker Contact Sheet</title>
        <script src="script/jquery.js" type="text/javascript"></script>
        <script src="script/vrs/enums.js" type="text/javascript"></script>
        <script src="script/vrs/aircraftPlotter.js" type="text/javascript"></script>
        <style type="text/css">
            body {
                font-family: sans-serif;
            }
            p {
                font-size: 10pt;
                margin: 4px;
            }
            .detail {
                font-size: 8pt;
                text-transform: uppercase;
            }
            .detail span:not(:first-child) {
                margin-left: 10px;
            }
            code {
                font-size: 8pt;
            }
        </style>
    </head>
    <body>
        <div id="sheet">
        </div>
        <script type="text/javascript">
            var _StepAngle = 11.25;
        
            function formFullPath(rotationAngle, folder, fileName)
            {
                return folder + '/top/no-cache/Rotate-' + rotationAngle + '/' + fileName;
            }
        
            jQuery(document).ready(function($) {
                $.each(VRS.globalOptions.aircraftMarkers, function(idx, marker) {
                    $('#sheet')
                    .append($('<p />')
                        .append($('<span />')
                            .text(marker.getNormalFileName())
                        )
                    )
                    .append($('<p />')
                        .addClass('detail')
                        .append($('<span />')
                            .text('' + marker.getSize().width + 'x' + marker.getSize().height)
                        ).append($('<span />')
                            .text(' ' + marker.getFolder())
                        ).append($('<span />')
                            .text(' ' + (marker.getIsAircraft() ? 'aircraft' : 'not aircraft'))
                        ).append($('<span />')
                            .text(' ' + (marker.getIsPre22Icon() ? 'old icon' : 'new icon'))
                        )
                    )
                    .append($('<code />')
                        .text(marker.getMatches().toString())
                    );
                    
                    for(var innerCount = 0;innerCount < 2;++innerCount) {
                        var folder = marker.getFolder();
                        var fileName = innerCount == 0 ? marker.getNormalFileName() : marker.getSelectedFileName();
                        if(innerCount == 1) {
                            if(fileName == marker.getNormalFileName()) continue;
                            $('#sheet')
                            .append($('<p />')
                                .append($('<span />')
                                    .text(fileName)
                                )
                            );
                        }
                    
                        var container = $('<div />').addClass('container');
                        $('#sheet').append(container);
                    
                        var step = marker.getCanRotate() ? _StepAngle : 999;
                        for(var angle = 0;angle < 361;angle += step) {
                            var normalisedAngle = angle % 360;
                            $('<img />')
                                .attr('src', formFullPath(normalisedAngle, folder, fileName))
                                .appendTo(container);
                        }
                    }
                    $('#sheet').append('<hr />');
                });
            });
        </script>
    </body>
</html>
